<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-order-commont">
      <div v-for="(items,key) in orderLists" :key="key">
        <!--商品列表1-->
        <ul class="order-list">
          <li class="item">
            <a class="product" href="#">
              <div class="item-media">
                <image class="img" mode="aspectFill" src="/static/images/test/img3.jpg"></image>
              </div>
              <div class="item-inner">
                <div class="inner1">
                  <p class="p p1">{{items.title}}</p>
                </div>
                <div class="inner2">
                  <p class="p p3">¥13.00</p>
                  <p class="p p5">x{{items.num}}</p>
                </div>
              </div>
            </a>

            <div class="total">
              <span class="span">数量:10</span>
              <span class="span">总计:¥100</span>
            </div>
          </li>
        </ul>

        <!--商品评价-->
        <div class="comment-box">
          <textarea name="" rows="3" placeholder="请输入商品评价"></textarea>

          <div class="weui-uploader__bd">
            <div class="weui-uploader__files">
              <block v-for="item in items.files" :key="index">
                <div class="weui-uploader__file" @click="predivImage" :data-files="items.files" :id="item">
                  <image class="weui-uploader__img" :src="item" mode="aspectFill" />
                </div>
              </block>
            </div>
            <div class="weui-uploader__input-box">
              <div class="weui-uploader__input" @click="chooseImage(e,items)"></div>
            </div>
          </div>
        </div>

        <!--单个商品评分-->
        <div class="order-rate">
          <div class="weui-cells__title">描述评分</div>
          <div class="weui-rate-wrap">
            <div class="tit">商品描述:</div>
            <ul class="weui-rate clear">
              <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= items.productValue}" :data-id="items.id" :data-index='index' @click="productRate">
                <i class="icon-star"></i>
              </li>
            </ul>
            <div>{{items.productScore}}</div>
          </div>
        </div>
      </div>

      <!--订单总评分-->
      <div class="order-rate">
        <div class="weui-cells__title">订单评分</div>
        <div class="weui-rate-wrap">
          <div class="tit">服务态度:</div>
          <ul class="weui-rate clear">
            <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= serviceValue}" :data-index='index' @click="serviceRate">
              <i class="icon-star"></i>
            </li>
          </ul>
          <div>{{serviceScore}}</div>
        </div>

        <div class="weui-rate-wrap">
          <div class="tit">物流描述:</div>
          <ul class="weui-rate clear">
            <li class="weui-rate-item" v-for="n in max" :key="index" :class="{'weui-rate-item-active' : index <= LogisticsValue}" :data-index='index' @click="LogisticsRate">
              <i class="icon-star"></i>
            </li>
          </ul>
          <div>{{LogisticsScore}}</div>
        </div>
      </div>

      <div class="ga-bottom-fixed">
        <a href="#" class="bottom">
          提交
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    data () {
      return {
        /*模拟数据*/
        orderLists:[
          {
            id:0,
            title:'标题1',
            num:1,
            files:[],
            productValue:-1,
            productScore: '',
          },
          {
            id:1,
            title:'标题2',
            num:2,
            files:[],
            productValue:-1,
            productScore: '',
          },
          {
            id:2,
            title:'标题3',
            num:3,
            files:[],
            productValue:-1,
            productScore: '',
          },
        ],
        max: 5,
        rateScoreDesc: ['非常不满意', '比较差', '一般', '比较满意', '非常满意'],
        serviceValue: -1,
        serviceScore: '',
        LogisticsValue: -1,
        LogisticsScore: '',
      }
    },

    created () {

    },

    methods:{
      /*
      * 上传图片
      * */
      chooseImage(e,items) {
        wx.chooseImage({
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            items.files = items.files.concat(res.tempFilePaths);
            console.log(items.files);
          },
          fail: function () {
            console.log('fail');
          },
          complete: function () {
            console.log('commplete');
          }
        })
      },
      /*
      * 图片预览
      * */
      predivImage(e) {
        wx.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls: e.currentTarget.dataset.files // 需要预览的图片http链接列表
        })
      },
      /*
      * 商品描述评分
      * */
      productRate(e) {
        const current =  e.mp.currentTarget.dataset.index;
        const id =  e.mp.currentTarget.dataset.id;

        this.orderLists.forEach(item=>{
          if(item.id==id){
            item.productValue=current;
            item.productScore=this.rateScoreDesc[current];
          }
        });
      },
      /*
      * 服务态度评分
      * */
      serviceRate(e) {
        this.serviceValue = e.mp.currentTarget.dataset.index;
        this.serviceScore = this.rateScoreDesc[this.serviceValue];
      },
      /*
      * 物流描述评分
      * */
      LogisticsRate(e) {
        this.LogisticsValue = e.mp.currentTarget.dataset.index;
        this.LogisticsScore = this.rateScoreDesc[this.LogisticsValue];
      }
    }
  }
</script>
